<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-团灭音标'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="3"> </RouterTabs>
        <view class="content">
          <view class="title">
            <text> 当前正在进行第{{ currentWheel }}轮学习</text>
          </view>
          <scroll-view scroll-x="true" class="chapter">
            <view class="chapter_container" v-if="chapterList.length > 0">
              <view class="chapter_content">
                <view
                  class="chapter_box"
                  v-for="(item, index) in chapterList"
                  :key="index"
                  @click="startLearning(item)"
                  :class="{
                    complete: index < currentChapterIndex,
                    ing: index === currentChapterIndex,
                    incomplete: index > currentChapterIndex,
                  }"
                >
                  <view
                    class="chapter_circle"
                    :class="{
                      active: !item.lockFlag,
                    }"
                  >
                    <view
                      class="chapter_text"
                      v-if="index < currentChapterIndex"
                    >
                      已学
                    </view>
                    <image
                      v-if="index === currentChapterIndex"
                      style="width: 93rpx; height: 98rpx"
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/book.png"
                      mode="scaleToFill"
                    />
                    <image
                      v-if="index > currentChapterIndex"
                      style="width: 82rpx; height: 102rpx"
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/lock.png"
                      mode="scaleToFill"
                    />
                  </view>
                  <view class="chapter_title"
                    >{{ item.chapterName.substr(0, 7) }}<br />{{
                      item.chapterName.substr(7)
                    }}</view
                  >
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <Tips :show="showTips"></Tips>
  </view>
</template>

<script>
import { getPhoneticChapter } from "@/api/spelling";
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "练习字母",
          url: "pages/spelling/letter",
        },
        {
          name: "浅学音标",
          url: "pages/spelling/soundmarkShallow",
        },
        {
          name: "拼读训练",
          url: "pages/spelling/spellingTraining",
        },
        {
          name: "团灭音标",
          url: "pages/spelling/soundmarkAce",
        },
        {
          name: "暴击词汇",
          url: "pages/spelling/vocabulary",
        },
      ],
      currentWheel: 1,
      chapterSort: 0,
      chapterList: [],
      currentChapterIndex: 0,
      showTips: false,
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      getPhoneticChapter().then((res) => {
        this.currentWheel = res.data.currentWheel;
        this.chapterList = res.data.chapters;
        this.chapterList.forEach((item, index) => {
          if (!item.lockFlag) {
            this.currentChapterIndex = index;
          }
        });
      });
    },
    startLearning(item, index) {
      if (item.lockFlag) {
        this.showTips = true;
        setTimeout(() => {
          this.showTips = false;
        }, 2000);
        return;
      }
      uni.navigateTo({
        url: `/pages/spelling/soundmarkAceDetail?id=${item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./soundmarkAce";
</style>
